import {ElNotification} from "element-plus";
import {useRoute, useRouter} from "vue-router";
import {useLoginStore} from "@/store/usersLoginStore.ts"
import {useBreadcrumbStore} from "@/store/breadcrumbStroe.ts";
import {logout} from "@/api/user";

export default function () {
    const loginStore = useLoginStore()
    const $route = useRouter()
    const route = useRoute()

    onMounted(loginStore.fetchImage);
//颜色组件组件的数据
    const color = ref('rgba(255, 69, 0, 0.68)')
    const predefineColors = ref([
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577',
    ])
    let dark = ref<boolean>(false);
//刷新按钮点击回调
    const updateRefsh = () => {
        location.reload();
    }
    const breadcrumbStore = useBreadcrumbStore()

//全屏按钮点击的回调
    const fullScreen = () => {
        //DOM对象的一个属性:可以用来判断当前是不是全屏模式[全屏:true,不是全屏:false]
        let full = document.fullscreenElement;
        //切换为全屏模式
        if (!full) {
            //文档根节点的方法requestFullscreen,实现全屏模式
            document.documentElement.requestFullscreen();
        } else {
            //变为不是全屏模式->退出全屏模式
            document.exitFullscreen();
        }
    }
//主题颜色的设置
    const setColor = (newColor:string) => {
        //通知js修改根节点的样式对象的属性与属性值
        color.value = newColor;
        const html = document.documentElement;
        html.style.setProperty('--el-color-primary', color.value);
    }
//switch开关的chang事件进行暗黑模式的切换
    const changeDark = () => {
        //获取HTML根节点
        let html = document.documentElement;
        //判断HTML标签是否有类名dark
        dark.value ? html.className = 'dark' : html.className = '';
    }
    const userLogout = () => {
        logout().then(async res => {
            if (res.code == 200) {
                loginStore.logout()
                await $route.push({path: '/login', replace: true})
                ElNotification({
                    message: '退出成功',
                    type: 'success',
                })
            }
        })
    }
    const handlePersonalCenterClick = async () => {
        await $route.push({path: '/personalCenter'})
        // 点击个人中心后，面包屑导航的数据清空，重新添加一条数据
        breadcrumbStore.breadcrumbData.length = 0
        breadcrumbStore.breadcrumbData.push({
            children: [],
            component: "",
            id: 0,
            meta: {title: '个人中心', icon: 'UserFilled'},
            redirect: "",
            path: '/personalCenter', name: '个人中心'
        })
    }
    // 监听路由的变化，当路由发生变化时，判断是否是个人中心路由，如果是，则调用handlePersonalCenterClick函数
    watch(() => route.path, async (newPath) => {
        if (newPath === '/personalCenter') {
            await handlePersonalCenterClick()
        }
    }, {immediate: true});
    return {
        color,
        dark,
        loginStore,
        predefineColors,
        updateRefsh,
        fullScreen,
        setColor,
        changeDark,
        userLogout,
        handlePersonalCenterClick
    }
}